<template>
  <div class="main">
    <div class="title">
      <h1>{{details.title}}</h1>
    </div>
    <div class="others">
      <div class="time">
        发布时间：{{details.time}}
      </div>
      <div class="tags">
        标签：
        <span class="tag" v-for="tag in details.tags">
          <el-tag>{{tag}}</el-tag>
        </span>
      </div>
    </div>
    <div class="article">
      {{details.detail}}
    </div>
    <hr>
    <div class="comment">
      <div class="com-title">评论：</div>
      <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="200"
              :autosize="{ minRows: 2, maxRows: 4}"
              show-word-limit
      >
      </el-input>
      <div class="comment-show">
        <div class="comment-item" v-for="(comment, key) in comments" :index="key">
          {{ comment.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    name: "Main",
    props: ['id'],
    data() {
      return {
        details: {
        },
        textarea: "",
        comments: [
          {
            text: "评论1"
          },
          {
            text: "评论2"
          },
          {
            text: "评论3"
          }
        ]
      }
    },
    beforeCreate() {
      axios.get("/api/index").then(res => {
        this.details = res.data
      })
    }
  }
</script>

<style scoped>
  .main {
    width: 60%;
    margin: 0 auto;
  }

  .article {
    line-height: 1.6em;
  }

  .time {
    font-size: .9em;
  }

  .tags {
    margin: 10px 0 15px 0;
    font-size: .9em;
  }

  .tag {
    margin-right: 4px;
  }

  .article {
    font-size: 1.1em;
    margin-bottom: 30px;
  }

  .comment {
    margin-top: 20px;
  }

  .com-title, .comment-show {
    text-align: left;
  }

  .com-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .comment-show {
    margin-top: 30px;
    margin-left: 20px;
  }

  .comment-item {
    margin: 20px 0;
  }

</style>
